<template>
  <div class="eir">
    <x-header>电子装箱单</x-header>
    <div
      class="eir-card"
      v-for="(item, index) in eirList"
      :key="index"
      @click="goToDetail(item)">
      <div class="eir-card-content">
        <div class="long-text">
          <span class="info-field">做箱时间：{{item.openTime|YYYYMMDD}}</span>
          <span class="info-field">门点：</span>
          <span class="info-field">发箱人：</span>
          <span class="info-field">客户名称：{{item.userName}}</span>
        </div>
        <div class="short-text">
          <span class="info-field">箱型：{{item.type}}</span>
          <span class="info-field">箱重：{{item.tweight}}</span>
        </div>
      </div>
      <div class="eir-card-footer">
        <span class="weight-tag">{{item.import|fxExportStatus}}</span>
      </div>
    </div>

  </div>
</template>

<script>
import {
  XHeader,
  Group,
  Cell
} from 'vux'
import {
  getEirList
} from '../../api/api'
export default {
  name: 'eir',
  components: {
    XHeader,
    Group,
    Cell
  },
  data () {
    return {
      eirList: []
    }
  },
  mounted () {
    this.getEirList()
  },
  methods: {
    goToDetail (item) {
      this.$router.push({
        path: '/main/eirInfo',
        query: item
      })
    },
    getEirList () {
      `1`
      getEirList({
        num: 10,
        page: 1
      }).then(res => {
        this.$vux.loading.hide()
        if (res.status === 200) {
          let data = res.data
          this.eirList = data
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
.eir{
  .eir-card{
    border-top: 7px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    .info-field{
      font-size: 14px;
      color: grey;
    }
    .weight-tag{
      border: 1px solid orange;
      font-size: 12px;
      color: orange;
      padding: 0 5px;
    }
    .eir-card-content{
      padding: 10px;
      position: relative;
      display: flex;
      .long-text,.short-text{
        display: flex;
        flex-direction: column;
      }
      .long-text{
        width: 65%;
      }
      .short-text{
        width: 35%;
      }
    }
    .eir-card-footer{
      border-top: 1px solid #e6e6e6;
      padding: 5px 10px;
      display: flex;
    }
  }
}
</style>
